<template>
  <div id="login">
    <van-nav-bar title="登录页" left-text="返回" left-arrow @click-left="$router.go(-1)" />

    <div class="login"></div>

    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]" />
    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]" />

    <div class="login1">
      <div>找回密码</div>
      <div @click="$router.push('smslogin')">注册 / 验证码登录</div>
    </div>

    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit">登录</van-button>
    </div>

    <div class="login2">
      <p>第三方登录</p>
      <div class="login3">
        <img src="/images/pay-wx.png" alt="">
        <img src="/images/pay-zhifubao.png" alt="">
        <img src="/images/pdf2.png" alt="">
      </div>
    </div>

  </div>
</template>

<script>
// 按需引入“vant”
import { Form, Field, Button, NavBar } from "vant";
export default {
  // 按需引入“vant”
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
  },

  data () {
    return {
      username: "",
      password: ""
    }
  },
  methods: {
    submit () {

    },
    onSubmit () {

    }
  },
  mounted () {

  },

}
</script>

<style>
#login {
  display: flex;
  flex-direction: column;
}
.login {
  width: 100%;
  height: 3.5rem;
  background: url("/images/detail.png") no-repeat center;
  background-size: 100%;
}
.login1 {
  padding: 0.4rem;
  display: flex;
  justify-content: space-between;
}
.login2 {
  text-align: center;
}
.login3 {
  display: flex;
  justify-content: space-around;
  font-size: 0.4rem;
}
.login3 img {
  width: 15%;
  height: 100%;
}
</style>